<!--
 * @Descripttion: 下拉组件
 * @Author: chendingfengmail@163.com
 * @version: 
 * @Date: 2021-06-02 08:50:18
 * @LastEditors: chendingfengmail@163.com
 * @LastEditTime: 2022-01-05 08:48:13
-->
<template>
  <div class="dd-drawer">
    <div class="dd-drawer-box">
      <el-button class="drawer-btn" @click="boxShow = !boxShow; changeIcon()" :icon="drawerBtnIcon" 
      :style="{width: (drawerStyle.width)/2 +'px', left: (drawerStyle.width)/4 +'px'}" type="primary"></el-button>
      <el-collapse-transition>
        <div class="drawer-box" v-show="boxShow">
          <div class="transition-box" :style="{width: drawerStyle.width +'px', height: drawerStyle.height +'px'}">
            <slot></slot>
          </div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
export default {
  name:"dd-drawer",
  props: {
    drawerStyle: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      boxShow: true,
      drawerBtnIcon: "el-icon-caret-bottom",
    }
  },
  created() {

  },
  mounted() {
  },
  methods: {
    changeIcon () {
      if (this.boxShow === false) {
        this.drawerBtnIcon = "el-icon-caret-bottom"
      } else {
        this.drawerBtnIcon = "el-icon-caret-top"
      }
    }

    
  }
}
</script>
<style lang="scss">
.dd-drawer {
  .dd-drawer-box {
    position: relative;
    .drawer-btn {
      position: absolute;
      z-index: 1;
      top: 5px;
      font-size: 20px;
      padding: 0;
    }
    .drawer-box {
      position: absolute;
      opacity: 1;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.21); 
      .transition-box {
        padding: 32px 0px 0px 0px;
      }
    }
  }
}

</style>